<!---
 添加商品信息
-->
<template>
  <a-form
    name="custom-validation"
    ref="formRef"
    :model="formState"
    :rules="rules"
    v-bind="layout"
    @finish="handleFinish"
    @finishFailed="handleFinishFailed"
  >
  <a-form-item required has-feedback label="商品分类:"  name="category">
          <a-tree-select
          v-model:value="selectValue"
          show-search
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="请选择商品录目"
          allow-clear
          tree-default-expand-all
        >
          <a-tree-select-node key="0-1" value="parent 1" title="银饰品">
            <a-tree-select-node key="0-1-1" value="parent 1-0" title="手镯">
              <a-tree-select-node key="random" value="leaf1" title="my leaf" />
              <a-tree-select-node key="random1" value="leaf2" title="your leaf" />
            </a-tree-select-node>
            <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
              <a-tree-select-node key="random3" value="sss">
                <template #title><b style="color: #08c">sss</b></template>
              </a-tree-select-node>
            </a-tree-select-node>
          </a-tree-select-node>
        </a-tree-select>
  </a-form-item>
    <a-form-item required has-feedback label="商品名称:" name="username">
      <a-input
        v-model:value="formState.username"
        type="text"
        autocomplete="off"
        placeholder="请输入商品名称"
      />
    </a-form-item>
    <a-form-item required has-feedback label="SEO关键字" name="nickname">
      <a-textarea
        required
        v-model:value="formState.nickname"
        type="text"
        :rows="4"
        placeholder="请输入真实姓名"
      />
    </a-form-item>
    <a-form-item required has-feedback label="商品轮播图:" name="phone" >
      <a-button type="dashed" style="width:120px;height:120px;" @click="add">
        <PlusOutlined />添加主图
      </a-button>
    </a-form-item>
    <a-form-item required has-feedback label="商品视频:"  name="email">
      <a-button type="dashed" style="width:120px;height:120px;" @click="add">
        <PlusOutlined />添加视频
      </a-button>
      <a-input
        v-model:value="formState.email"
        type="email"
        autocomplete="off"
        placeholder="视频链接地址"
      />
    </a-form-item>
    <a-form-item label="商品品牌:"  name="Username">
        <a-select  placeholder="选择品牌名称">
          <a-select-option value="小品牌">小品牌</a-select-option>
          <a-select-option value="大品牌">小品牌</a-select-option>
        </a-select>  
   </a-form-item>
    <a-form-item required has-feedback label="商品属性:"  name="email">
        <p>请准确填写属性，有利于商品在搜索和推荐中露出。</p>
        <div class="attribute">
          <a-form
              layout="inline"
              :model="formState"
              @finish="handleFinish"
              @finishFailed="handleFinishFailed"
            >
              <a-form-item label="商品属性:"  name="Username">
                <a-select v-model:value="formState.username" placeholder="品牌名称"  style="width:180px">
                  <a-select-option value="小品牌">Zone one</a-select-option>
                  <a-select-option value="大品牌">Zone two</a-select-option>
                </a-select>
              </a-form-item>
               <a-form-item label="商品属性:"  name="Username">
                <a-select v-model:value="formState.username" placeholder="品牌名称" style="width:180px">
                  <a-select-option value="小品牌">Zone one</a-select-option>
                  <a-select-option value="大品牌">Zone two</a-select-option>
                </a-select>
              </a-form-item>
               <a-form-item label="商品属性:"  name="Username">
                <a-select v-model:value="formState.username" placeholder="品牌名称" style="width:180px">
                  <a-select-option value="小品牌">Zone one</a-select-option>
                  <a-select-option value="大品牌">Zone two</a-select-option>
                </a-select>
              </a-form-item>
               <a-form-item label="商品属性:"  name="Username">
                <a-select v-model:value="formState.username" placeholder="品牌名称" style="width:180px">
                  <a-select-option value="小品牌">Zone one</a-select-option>
                  <a-select-option value="大品牌">Zone two</a-select-option>
                </a-select>
              </a-form-item>
         </a-form>
          
        </div>
    </a-form-item>

   
     <a-form-item label="商品规格与库存:"  :wrapper-col="{ span:20}">
         <div class="red"><a-switch v-model:checked="formState.delivery" /> 是否开启多规格</div>
          <sku-list v-if="formState.delivery"></sku-list>
          <skuOnly v-if="!formState.delivery"></skuOnly>
     </a-form-item>

    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="goodsAddClass.onNext(2)">下一步</a-button>
    </a-form-item>
  </a-form>

</template>
<script lang="ts">

import { defineComponent, reactive, ref, UnwrapRef,watch } from "vue";
import { Button,Input,Form,TreeSelect,Select,Modal,Switch} from "ant-design-vue";
import {PlusOutlined} from '@ant-design/icons-vue';
import {RuleObject,ValidateErrorEntity,} from "ant-design-vue/es/form/interface";

import {goodsAddClass} from "@/modules/goods/productAdd";

 import skuList from "./skuList.vue";
 import skuOnly from "./skuOnly.vue";



export default defineComponent({
   components: {
      [Button.name]:Button,
      [Input.name]:Input,
      [Input.TextArea.name]:Input.TextArea,
      [Form.name]:Form,
      [Form.Item.name]:Form.Item,
      [Select.name]:Select,
      [Select.Option.displayName]:Select.Option,
      [Select.OptGroup.displayName]:Select.OptGroup,
      [TreeSelect.name]:TreeSelect,
      [TreeSelect.TreeNode.displayName]:TreeSelect.TreeNode,
      [Modal.name]:Modal,
      [Switch.name]:Switch,
      PlusOutlined,
      skuList,
      skuOnly
  },
  setup() {
    const formRef = ref();
    const layout = {
      labelCol: { span:3 },
      wrapperCol: { span:9 },
    };
    const formState: UnwrapRef<FormState> = reactive({
      username:"",
      nickname: "",
      phone: "",
      email: "",
      department: "",
      delivery:true,
    });

    const rules = {
      //表单检证
      username: [
        { required: true, message: "账号名不能为空", trigger: "change" },
        {
          min: 3,
          max: 20,
          message: "账号名长度为3至20个字符之间",
          trigger: "change",
        },{
          pattern: /^[A-Za-z]{1}[A-Za-z0-9]/, ///^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,20}$/
          message: "账号必须是英文母字开头和数字组成",
        },
      ],
      nickname: [
        { required: true, message: "真实姓名不能为空", trigger: "change" },
        {
          min:2,
          max:20,
          message: "真实姓名名长度为2至20个字符之间",
          trigger: "change",
        },{
          pattern: /^[\u4e00-\u9fa5]+$/, ///^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,20}$/
          message: "真实姓名必须为中文汉字",
        }
      ],
      phone: [
        {
          required: true,
          message: "手机号不能为空",
          trigger: "change",
        },
        {
          min: 11,
          max: 11,
          message: "手机号为11个数字组成",
          trigger: "change",
        },
        {
          pattern: /^1[3-9]\d{9}$/,
          message: "手机号格式错误",
        },
      ],
      email: [
        {
          required: true,
          message: "邮箱不能为空",
          trigger: "change",
        },
        {
          pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
          message: "邮箱格式错误",
        },
      ],
      department: [
        { required: true, message: "部门不能为空", trigger: "change" },
      ],
    };

    const handleFinish = (values) => {
      //提交表单且数据验证成功后回调事件
      console.log(values);
      //userAadd(values);
    };
    const handleFinishFailed = (errors: ValidateErrorEntity<FormState>) => {
      //提交表单且数据验证失败后回调事件
      console.log(errors);
    };
    const resetForm = () => {//重置
      formRef.value.resetFields();
    };
    const add=()=>{
         console.log("----")
    }


    const selectValue = ref<string>();
    watch(selectValue, () => {
      console.log(selectValue.value);
    });
    return {
      formState,
      formRef,
      rules,
      layout,
      handleFinishFailed,
      handleFinish,
      resetForm,
      add,
      selectValue,
      goodsAddClass
    };
  },
});
</script>

<style lang="scss" scoped>
.attribute{
  background: #f5f5f5;
  padding:20px;
}
.sku{
  width:100%;
  overflow: hidden;
}
.red{
  color: #f40;
}
</style>